<?xml version="1.0" encoding="utf-8" ?>
<xsl:stylesheet version="1.0" 
         xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
		 xmlns:fn="http://www.w3.org/2005/02/xpath-functions"
         xmlns:sd21sonarpantilt="http://www.robot-electronics.co.uk/2006/10/sd21sonarpantilt.html"
		 xmlns:phys="http://schemas.microsoft.com/robotics/2006/07/physicalmodel.html">

	<xsl:output method="html"  version="4.01" encoding="utf-8" indent="yes" 
              doctype-public="-//W3C//DTD HTML 4.01 Transitional//EN"
              doctype-system="http://www.w3.org/TR/html4/loose.dtd" />
	<xsl:template match="/sd21sonarpantilt:SD21SonarPanTiltState">
		<html >
			<head>
				<title>SD21 Sonar Pan Tilt Service</title>
        <!--
				<style type="text/css">
					html, body, span, div {font-size:11px;font-family:"Tahoma","sans-serif" }
					form { margin: 0; border:0 ; padding: 0; }

					div.RightColumn {float: right; text-align: right;}
					div.LeftColumn { width: 300px; border:0px;}
					div.Module {border-top: 1px solid #CCCCCC; padding-top: 10px;}
					div.Description { color:#666666; font-size: 12px; line-height: 18px; padding-top: 15px; padding-bottom: 20px;}
					div.hr {border-top: 1px solid #CCCCCC; padding-top: 10px;}

					.PageName {color: #003399; font-size:16px; font-weight: bold; margin-top: 10px; display:block;}
					.ModuleName {color: #003399; font-size:12px; font-weight: bold;}
					.SubTitle {color: #003399; font-size:11px; font-weight: bold; margin-top:20px;}
					.key {color:#666666; }
					.value {color:#666666; font-weight: bold;}
					.SmallText {color:#CCCCCC; font-size: 9px; margin-bottom:10px;}
					.SmallTextRight { display:block; float:right; color:#999999; font-size: 11px; font-weight: normal;}

					input.Editable {border: 0px; font-weight:bold; color: #F37913; width: 40px; line-height: 16px;}
					input.EditableActive {border: 0px; background:#EEEEEE; color: #F37913; font-weight: bold;  width: 40px; line-height: 16px;}

					table.Config input.Editable {border: 0px; font-weight:normal; color: #F37913; width: 40px; line-height: 12px; font-size: 11px;}
					table.Config input.EditableActive {border: 0px; background:#EEEEEE; font-weight:normal; color: #F37913; width: 40px; line-height: 12px; font-size: 11px;}
					table.Config, table.Pixels { border-collapse:collapse;}
					table.Config th, table.Pixels th {color: #003399; font-size:11px; font-weight: bold; text-align: left;}
					table.Config td {color: #999999; font-size: 11px;}

					table.layout {border: 10px; border-collapse: collapse;}
					table.layout td { vertical-align: top; }
					td.Pixel {width:10px; height: 10px; vertical-align: top; color: #F37913; font-size: 11px;  font-weight: bold; }

					a{color:#003399;text-decoration: none;}
					a:visited{color:#3169B5;}
					a:hover{color:#0368FA;text-decoration: underline;}
				</style>
-->

        <style type="text/css">

          div.title { color:#330099; margin: 10px 0 10px 0; font-size: 1em; font-weight: bold;}

          fieldset { width:400px; border: solid 1px #660000; padding-bottom:15px;}
          legend { color:#663333; font-size: 0.9em; font-weight: bold; }
          input.editable { background:#FFFFFF; border: solid 1px #FFFFFF; color:#660000; font-size: 1em; font-weight: bold; height: 22px; padding: 2px;}
          input.editableSmall { background:#FFFFFF; border: solid 1px #FFFFFF; color:#660000; font-size: 1em; font-weight: bold; height: 22px; padding: 2px; width: 50px;}
          input.editable:HOVER, input.editableSmall:HOVER {background:#FFFF99;}

          label { color:#666666; display:block; height: 20px; width: 120px;
          margin-right: 5px; float: left; text-align:right; margin-top: 3px; }

          div.submitButtons { display: none;  margin: 10px 0 5px 125px; height: 20px; padding-top: 10px;  }

          .helpText {  margin: 5px 0 15px 10px; }

          fieldset.selected input.editableSmall {background:#FFFF99; border: solid 1px #FFFFFF; color:#660000; font-size: 1em; font-weight: bold; height: 22px; padding:2px; width: 50px;}
          fieldset.selected input.editable {background:#FFFF99; border: solid 1px #FFFFFF; color:#660000; font-size: 1em; font-weight: bold; height: 22px; padding:2px;}
          fieldset.selected .submitButtonsSelected { display: ''; margin: 10px 0 5px 125px;  }

          div.fieldRowRight label.inline { display: inline; margin-right: 5px;
          text-align: right; margin-top: 3px;  float: none;
          height: 20px; padding-top: 10px;}

          .right fieldset { width:250px; float: right; }
          .right label { width: 120px; }
          .right fieldset.selected .submitButtonsSelected { margin: 5px 5px 5px 0px; float:right;}
          .right input.editable { width: 100px; }

        </style>

        <script type="text/javascript">
          function op(obj,id2) {
          o(id2).className = 'selected';
          o(id2 + 'Buttons').className = 'submitButtonsSelected';
          b();
          obj.select() ;
          }
          function of( id) {
          o(id).className = 'none';
          o(id + 'Buttons').className = 'submitButtons';
          b();
          }
          function o(id) {
          return document.getElementById(id);
          }
          function b() {
          if (document.selection)
          document.selection.empty();
          else if (window.getSelection)
          window.removeAllRanges();
          }

        </script>
			</head>
			<body>
				<div class="RightColumn">
          <form>
            <input type="button" value="XML" title="View Raw XML" class="OrangeButton" onClick="javascript:document.location.href=document.location.href + '/raw'" />
          </form>
				</div>
				<span class="PageName">SD21 Sonar Pan Tilt Service</span>
				<div class="Description">
					Does timed moves of a servo making use of the speed command to avoid having to control each step of a move, and stores sonar pings according to the time received. <br/><br/>
          Scans zig zag while moving up and down.<br/>
					If you see gaps in the otherwise smooth gradiant, then you are moving the servo too fast, or not pinging fast enough.
				</div>
				<div class="Module">



          <form>
            <fieldset id=">Enable" class="none">
              <legend> Enable</legend>
              <div class="helpText"></div>

              <div class="submitButtons" id="EnableButtons">
                <input type="reset" value="Cancel"  onClick="of('Enable');" /> or <input type="submit" value=" Enable" id="EnableSubmit" />
              </div>
            </fieldset>
            </form>

              <form>
                <fieldset id=">Disable" class="none">
                  <legend> Disable</legend>
                  <div class="helpText"></div>

                  <div class="submitButtons" id="DisableButtons">
                    <input type="reset" value="Cancel"  onClick="of('Disable');" /> or <input type="submit" value=" Disable" id="DisableSubmit" />
                  </div>
                </fieldset>
                </form>

                  <form>
                    <fieldset id=">SetPanConfig" class="none">
                      <legend>Set PanConfig</legend>
                      <div class="helpText"></div>

                      <label for="ServoChannel">ServoChannel:</label>
                      <div class="fieldRowRight">
                        <input id="ServoChannel" name="ServoChannel" type="text" value="" class="editable" 
                          onFocus="op(this, '>SetPanConfig');" 
                          title="Click to edit.">
                          <xsl:attribute name="value">
                            <xsl:value-of select="srf08:ServoChannel"/>
                          </xsl:attribute>
                        </input>
                      </div>
                      <br clear="left"/>
                      <label for="PanTime">PanTime:</label>
                      <div class="fieldRowRight">
                        <input id="PanTime" name="PanTime" type="text" value="" class="editable" 
                          onFocus="op(this, '>SetPanConfig');" 
                          title="Click to edit.">
                          <xsl:attribute name="value">
                            <xsl:value-of select="srf08:PanTime"/>
                          </xsl:attribute>
                        </input>
                      </div>
                      <br clear="left"/>
                      <label for="MinPulseWidth">MinPulseWidth:</label>
                      <div class="fieldRowRight">
                        <input id="MinPulseWidth" name="MinPulseWidth" type="text" value="" class="editable" 
                          onFocus="op(this, '>SetPanConfig');" 
                          title="Click to edit.">
                          <xsl:attribute name="value">
                            <xsl:value-of select="srf08:MinPulseWidth"/>
                          </xsl:attribute>
                        </input>
                      </div>
                      <br clear="left"/>
                      <label for="MaxPulseWidth">MaxPulseWidth:</label>
                      <div class="fieldRowRight">
                        <input id="MaxPulseWidth" name="MaxPulseWidth" type="text" value="" class="editable" 
                          onFocus="op(this, '>SetPanConfig');" 
                          title="Click to edit.">
                          <xsl:attribute name="value">
                            <xsl:value-of select="srf08:MaxPulseWidth"/>
                          </xsl:attribute>
                        </input>
                      </div>
                      <br clear="left"/>
                      <div class="submitButtons" id="SetPanConfigButtons">
                        <input type="reset" value="Cancel"  onClick="of('SetPanConfig');" /> or <input type="submit" value="Set PanConfig" id="SetPanConfigSubmit" />
                      </div>
                    </fieldset>
                    </form>

                      <form>
                        <fieldset id=">SetHardwareIdentifiers" class="none">
                          <legend>Set HardwareIdentifiers</legend>
                          <div class="helpText">Sets the list of Generic Sonars to listen for.</div>

                          <label for="HardwareIdentifiers">HardwareIdentifiers:</label>
                          <div class="fieldRowRight">
                            <input id="HardwareIdentifiers" name="HardwareIdentifiers" type="text" value="" class="editable" 
                              onFocus="op(this, '>SetHardwareIdentifiers');" 
                              title="Click to edit.">
                              <xsl:attribute name="value">
                                <xsl:value-of select="srf08:HardwareIdentifiers"/>
                              </xsl:attribute>
                            </input>
                          </div>
                          <br clear="left"/>
                          <div class="submitButtons" id="SetHardwareIdentifiersButtons">
                            <input type="reset" value="Cancel"  onClick="of('SetHardwareIdentifiers');" /> or <input type="submit" value="Set HardwareIdentifiers" id="SetHardwareIdentifiersSubmit" />
                          </div>
                        </fieldset>
                        </form>

                          <form>
                            <fieldset id=">SetServoPose" class="none">
                              <legend>Set ServoPose</legend>
                              <div class="helpText">Sets the Pose of the center of rotation with respect to the robot's Pose</div>

                              <label for="ServoPosePosX">ServoPose X</label>
                              <div class="fieldRowRight">
                                <input id="ServoPosePosX" name="ServoPosePosX" type="text"
                                class="editableSmall" onFocus="op(this,'SetServoPose');" title="Click to edit" >
                                  <xsl:attribute name="value">
                                    <xsl:value-of select="srf08:ServoPose/phys:Position/phys:X"/>
                                  </xsl:attribute>
                                </input>
                                </input>
                                <label for="ServoPosePosY" class="inline">ServoPose Y</label>
                                <input id="ServoPosePosY" name="ServoPosePosY" type="text" 
                                class="editableSmall" onFocus="op(this,'SetServoPose');" title="Click to edit" >
                                  <xsl:attribute name="value">
                                    <xsl:value-of select="srf08:ServoPose/phys:Position/phys:Y"/>
                                  </xsl:attribute>
                                </input>
                                <label for="ServoPosePosZ" class="inline">ServoPose Z</label>
                                <input id="ServoPosePosZ" name="ServoPosePosZ" type="text"
                                class="editableSmall" onFocus="op(this,'SetServoPose');" title="Click to edit" >
                                  <xsl:attribute name="value">
                                    <xsl:value-of select="srf08:ServoPose/phys:Position/phys:Z"/>
                                  </xsl:attribute>
                                </input>
                              </div>
                              <label for="ServoPoseOriX">ServoPose X</label>
                              <div class="fieldRowRight">
                                <input id="ServoPoseOriX" name="ServoPoseOriX" type="text"
                                class="editableSmall" onFocus="op(this,'SetServoPose');" title="Click to edit" >
                                  <xsl:attribute name="value">
                                    <xsl:value-of select="srf08:ServoPose/phys:Orientation/phys:X"/>
                                  </xsl:attribute>
                                </input>
                                <label for="ServoPoseOriY" class="inline">ServoPose Y</label>
                                <input id="ServoPoseOriY" name="ServoPoseOriY" type="text"
                                class="editableSmall" onFocus="op(this,'SetServoPose');" title="Click to edit" >
                                  <xsl:attribute name="value">
                                    <xsl:value-of select="srf08:ServoPose/phys:Orientation/phys:X"/>
                                  </xsl:attribute>
                                </input>
                                <label for="ServoPoseOriZ" class="inline">ServoPose Z</label>
                                <input id="ServoPoseOriZ" name="ServoPoseOriZ" type="text"
                                class="editableSmall" onFocus="op(this,'SetServoPose');" title="Click to edit" >
                                  <xsl:attribute name="value">
                                    <xsl:value-of select="srf08:ServoPose/phys:Orientation/phys:Z"/>
                                  </xsl:attribute>
                                </input>
                                <label for="ServoPoseOriZ" class="inline">ServoPose W</label>
                                <input id="ServoPoseOriW" name="ServoPoseOriW" type="text"
                               class="editableSmall" onFocus="op(this,'SetServoPose');" title="Click to edit" >
                                  <xsl:attribute name="value">
                                    <xsl:value-of select="srf08:ServoPose/phys:Orientation/phys:W"/>
                                  </xsl:attribute>
                                </input>
                              </div>
                              <br clear="left" />
                              <div class="submitButtons" id="SetServoPoseButtons">
                                <input type="reset" value="Cancel"  onClick="of('SetServoPose');" /> or <input type="submit" value="Set ServoPose" id="SetServoPoseSubmit" />
                              </div>
                            </fieldset>
                            </form>
                              
                              //**end new
					<div class="RightColumn">
						<table class="Config">
							<tr>
								<th colspan="2">
									Pan Tilt Config
								</th>
							</tr>
							<tr>
								<td class="SmallText">
									Enabled
								</td>
								<td class="SmallText">
									<form method="POST"  id="EnabledForm">
										<input type="hidden" name="EnabledChange" value="true"/>
										<input id="Enabled" name="Enabled" onclick="document.getElementById(this.id + 'Form').submit();"
											title="Click to enable" type="checkbox">
											<xsl:if test="sd21sonarpantilt:Enabled = 'true'">
												<xsl:attribute name="checked">CHECKED</xsl:attribute>
												<xsl:attribute name="value">on</xsl:attribute>
											</xsl:if>
										</input>
									</form>
								</td>
							</tr>
							<tr>
								<td class="SmallText">
									Pan Servo Channel:
								</td>
								<td class="SmallText">
									<form method="POST"  id="PanServoChannelForm">
										<input id="PanServoChannel" class="Editable" maxlength="10" name="PanServoChannel" onblur="this.className='Editable';document.getElementById(this.id + 'Form').submit();"
											onfocus="this.className='EditableActive'" title="Click to change the PanServoChannel"
											type="text" >
											<xsl:attribute name="value">
												<xsl:value-of select="sd21sonarpantilt:PanServoChannel" />
											</xsl:attribute>
										</input>
									</form>
								</td>
							</tr>
							<tr>
								<td class="SmallText">
									Pan Time:
								</td>
								<td class="SmallText">
									<form method="POST"  id="PanTimeForm">
										<input id="PanTime" class="Editable" maxlength="10" name="PanTime" onblur="this.className='Editable';document.getElementById(this.id + 'Form').submit();"
											onfocus="this.className='EditableActive'" title="Click to change the PanTime"
											type="text" >
											<xsl:attribute name="value">
												<xsl:value-of select="sd21sonarpantilt:PanTime" />
											</xsl:attribute>
										</input>
									</form>
								</td>
							</tr>
							<tr>
								<td class="SmallText">
									Pan Min Pulsewidth:
								</td>
								<td class="SmallText">
									<form method="POST"  id="PanMinForm">
										<input id="PanMin" class="Editable" maxlength="10" name="PanMin" onblur="this.className='Editable';document.getElementById(this.id + 'Form').submit();"
											onfocus="this.className='EditableActive'" title="Click to change the PanMin"
											type="text" >
											<xsl:attribute name="value">
												<xsl:value-of select="sd21sonarpantilt:PanMin" />
											</xsl:attribute>
										</input>
									</form>
								</td>
							</tr>
							<tr>
								<td class="SmallText">
									Pan Max Pulsewidth:
								</td>
								<td class="SmallText">
									<form method="POST"  id="PanMaxForm">
										<input id="PanMax" class="Editable" maxlength="10" name="PanMax" onblur="this.className='Editable';document.getElementById(this.id + 'Form').submit();"
											onfocus="this.className='EditableActive'" title="Click to change the PanMax"
											type="text" >
											<xsl:attribute name="value">
												<xsl:value-of select="sd21sonarpantilt:PanMax" />
											</xsl:attribute>
										</input>
									</form>
								</td>
							</tr>
							<tr>
								<td class="SmallText">
									Angular Range:
								</td>
								<td class="SmallText">
									<form method="POST"  id="AngularRangeForm">
										<input id="AngularRange" class="Editable" maxlength="10" name="AngularRange" onblur="this.className='Editable';document.getElementById(this.id + 'Form').submit();"
											onfocus="this.className='EditableActive'" title="Click to change the AngularRange"
											type="text" >
											<xsl:attribute name="value">
												<xsl:value-of select="sd21sonarpantilt:AngularRange" />
											</xsl:attribute>
										</input>
									</form>
								</td>
							</tr>
              <tr>
                <td class="SmallText">
                  Tilt Servo Channel:
                </td>
                <td class="SmallText">
                  <form method="POST"  id="TiltServoChannelForm">
                    <input id="TiltServoChannel" class="Editable" maxlength="10" name="TiltServoChannel" onblur="this.className='Editable';document.getElementById(this.id + 'Form').submit();"
											onfocus="this.className='EditableActive'" title="Click to change the TiltServoChannel"
											type="text" >
                      <xsl:attribute name="value">
                        <xsl:value-of select="sd21sonarpantilt:TiltServoChannel" />
                      </xsl:attribute>
                    </input>
                  </form>
                </td>
              </tr>
              <tr>
                <td class="SmallText">
                  Tilt Min Pulsewidth:
                </td>
                <td class="SmallText">
                  <form method="POST"  id="TiltMinForm">
                    <input id="TiltMin" class="Editable" maxlength="10" name="TiltMin" onblur="this.className='Editable';document.getElementById(this.id + 'Form').submit();"
											onfocus="this.className='EditableActive'" title="Click to change the TiltMin"
											type="text" >
                      <xsl:attribute name="value">
                        <xsl:value-of select="sd21sonarpantilt:TiltMin" />
                      </xsl:attribute>
                    </input>
                  </form>
                </td>
              </tr>
              <tr>
                <td class="SmallText">
                  Tilt Max Pulsewidth:
                </td>
                <td class="SmallText">
                  <form method="POST"  id="TiltMaxForm">
                    <input id="TiltMax" class="Editable" maxlength="10" name="TiltMax" onblur="this.className='Editable';document.getElementById(this.id + 'Form').submit();"
											onfocus="this.className='EditableActive'" title="Click to change the TiltMax"
											type="text" >
                      <xsl:attribute name="value">
                        <xsl:value-of select="sd21sonarpantilt:TiltMax" />
                      </xsl:attribute>
                    </input>
                  </form>
                </td>
              </tr>
             
							<tr>
								<td class="SmallText">
									Angular Resolution:
								</td>
								<td class="SmallText">
									<form method="POST"  id="AngularResolutionForm">
										<input id="AngularResolution" class="Editable" maxlength="10" name="AngularResolution" onblur="this.className='Editable';document.getElementById(this.id + 'Form').submit();"
											onfocus="this.className='EditableActive'" title="Click to change the AngularResolution"
											type="text" >
											<xsl:attribute name="value">
												<xsl:value-of select="sd21sonarpantilt:AngularResolution" />
											</xsl:attribute>
										</input>
									</form>
								</td>
							</tr>
							<tr>
								<td class="SmallText">
									Draw Scale:
								</td>
								<td class="SmallText">
									<form method="POST"  id="DrawScaleForm">
										<input id="DrawScale" class="Editable" maxlength="10" name="DrawScale" onblur="this.className='Editable';document.getElementById(this.id + 'Form').submit();"
											onfocus="this.className='EditableActive'" title="Click to change the DrawScale"
											type="text" >
											<xsl:attribute name="value">
												<xsl:value-of select="sd21sonarpantilt:DrawScale" />
											</xsl:attribute>
										</input>
									</form>
								</td>
							</tr>
						</table>
					</div>

					<span class="key">
						Sonar Identifier:
					</span>
					<span class="value">
						<xsl:value-of select="sd21sonarpantilt:HardwareIdentifier" />
					</span>
					<br/>
					<span class="key">
						Sonar Max Range:
					</span>
					<span class="value">
						<xsl:value-of select="sd21sonarpantilt:MaxDistance" /> m
					</span>
					<br/>
					<span class="key">
						Sonar Position:
					</span>
					<span class="value">
						(X: <xsl:value-of select="//phys:Position/phys:X" />,
						Y: <xsl:value-of select="//phys:Position/phys:Y" />,
						Z: <xsl:value-of select="//phys:Position/phys:Z" />)
					</span>
					<br/>
					<span class="key">
						Sonar Orientation:
					</span>
					<span class="value">
						(X: <xsl:value-of select="//phys:Orientation/phys:X" />,
						Y: <xsl:value-of select="//phys:Orientation/phys:Y" />,
						Z: <xsl:value-of select="//phys:Orientation/phys:Z" />,
						W: <xsl:value-of select="//phys:Orientation/phys:W" />)
					</span>
					<br/>
					<span class="key">
						Last Sonar Contact:
					</span>
					<span class="value">
						<xsl:value-of select="sd21sonarpantilt:Timestamp" />
					</span>
					<br/>
					<span class="key">
						Pan started:
					</span>
					<span class="value">
						<xsl:value-of select="sd21sonarpantilt:StartTime" />
					</span>
					<br/>
					<span class="key">
						Pan will end: 
					</span>
					<span class="value">
						<xsl:value-of select="sd21sonarpantilt:EndTime" />
					</span>
					<br/>
					<img src="/sd21sonarpantilt/map.png" />
					<br/>
					<span class="key">Distance Measurements:</span>
					<br/>
					<table>
						<tr>
							<xsl:for-each select="sd21sonarpantilt:DistanceMeasurements/*">
								<td>
									<span class="key">
										<xsl:value-of select="position()"/>:
									</span>
								</td>
							</xsl:for-each>
						</tr>
						<tr>
							<xsl:for-each select="sd21sonarpantilt:DistanceMeasurements/*">
								<td>	
									<span class="value">
										<xsl:value-of select="." />
									</span>
								</td>
							</xsl:for-each>
						</tr>
					</table>
				</div>
				<br clear="all" />
				<div class="hr"></div>
				<span class="SmallText">Config at: /store/Devantech.Services.SD21SonarPanTilt.xml</span>
				<br/>
				Configure your Sonar Poll frequency using your sonar hardware page. (Possibly: <a href="/srf08hardware">SRF08 Hardware page</a>, or <a href="/srf235hardware">SRF235 Hardware Page</a>)
      <br/>
				Ensure the limits for Min and Max are within the range set for the servo on the <a href="/sd21hardware">SD21 Hardware page</a>
			</body>
		</html>
	</xsl:template>
</xsl:stylesheet>
